<template>
<div>
    <h1>人员列表</h1>
    <h3>Count组件求和为：{{sum}}</h3>
    <input type="text" placeholder="请输入名字" v-model="name" @keydown.enter="add"/>
    <button @click="add">添加</button>
    <ul>
        <li v-for="p in personList" :key="p.id">{{p.name}}</li>
    </ul>
</div>
</template>

<script>
import { nanoid } from 'nanoid'
export default {
    name:'Person',
    computed:{
        personList(){
            return this.$store.state.userList
        },
        sum(){
            return this.$store.state.sum
        }
    },
    data() {
        return {
            name:''
        }
    },
    methods:{
        add(){
            if(!this.name.trim()) return alert('输入不能为空！')
            const personObj = {id:nanoid(),name:this.name}
            this.$store.commit('ADD_PERSON',personObj)
            this.name = ''
        }
    }
}
</script>
<style >
</style>